<template>
  <div id="choose-stock-box">
    <div class="row" v-for="(item,index) in modelArr">
      <div class="name" v-text="item.name+':'"></div>
      <div class="list">
        <div class="item"
             v-for="(_item,_index) in item.arr"
             v-text="_item"
             :class="{curr:currModelArr.indexOf(_item)>-1}"
             @click="choose(index,_item)"></div>
        <div class="c"></div>
      </div>
    </div>
    <div class="c"></div>
  </div>
</template>

<script>
export default {
  name: 'ChooseStockBox',
  props: {
    modelArr: Array,
    defaultModel: String
  },
  data: function () {
    return {
      currModelArr: []
    }
  },
  mounted () {
    if (this.$props.defaultModel) {
      this.currModelArr = this.$props.defaultModel.split(',')
    }
    if (!this.currModelArr || this.currModelArr.length===0){
      var defaultModel = []
      let $this = this
      $this.modelArr.forEach(function (value, index) {
        defaultModel.push(value.arr[0])
      })
      $this.currModelArr = defaultModel
    }
  },
  methods: {
    choose: function (index, value) {
      this.$set(this.currModelArr, index, value)
    }
  }
}
</script>

<style scoped>

</style>
